@extends('layouts.admin')

@section("admin-css")
    <style type="text/css">
        .status > span {
            float: left;
            font-size: 12px;
            width: 14%;
            text-align: right;
        }

        .btn-deploy {
            margin-left: 30px;
        }

        .btn-return {
            /*float: right;*/
            margin-left: 30px;
        }
    </style>
@endsection

@section('admin-content')
    <div class="box deploy-box">
        <h4 class="box-title header smaller red">
            <i class="glyphicon glyphicon-map-marker"></i>{{ trans("strings.project.level.".$task->project->level) }}
            -
            {{ $task->project->name }}
            ：
            {{ $task->title }}
            <button type="submit" class="btn btn-primary btn-deploy"
                    data-id="{{ $task->id }}">{{ trans("labels.deploy") }}</button>
            <a class="btn btn-success btn-return"
               href="{{ url("task") }}">{{ trans("labels.return") }}</a>
        </h4>
        <div class="status">
            <span><i class="text-yellow step-1"></i>{{ trans("alerts.deploy.process_detect") }}</span>
            <span><i class="text-yellow step-2"></i>{{ trans("alerts.deploy.process_pre-deploy") }}</span>
            <span><i class="text-yellow step-3"></i>{{ trans("alerts.deploy.process_checkout") }}</span>
            <span><i class="text-yellow step-4"></i>{{ trans("alerts.deploy.process_post-deploy") }}</span>
            <span><i class="text-yellow step-5"></i>{{ trans("alerts.deploy.process_rsync") }}</span>
            <span style="width: 28%"><i
                        class="text-yellow step-6"></i>{{ trans("alerts.deploy.process_update") }}</span>
        </div>
        <div style="clear:both"></div>
        <div class="progress progress-small progress-striped active">
            <div class="progress-bar progress-status progress-bar-success"
                 style="width: {{ $task->status == config("constants.task.status.complete") ? 100 : 0 }}%;"></div>
        </div>

        <div class="alert alert-block alert-success result-success"
             style="@if($task->status != config("constants.task.status.complete")) display: none @endif">
            <h4><i class="icon-thumbs-up"></i>{{ trans("alerts.deploy.done") }}</h4>
            <p>{{ trans("alerts.deploy.done_praise") }}</p>

        </div>

        <div class="alert alert-block alert-danger result-failed" style="display: none">
            <h4><i class="icon-bell-alt"></i>{{ trans("alerts.deploy.error_title") }}</h4>
            <span class="error-msg">
        </span>
            <br><br>
            <i class="icon-bullhorn"></i><span>{{ trans("alerts.deploy.error_todo") }}</span>
        </div>
    </div>
@endsection

@section("admin-js")
    <script type="text/javascript">
        $(function () {
            $('.btn-deploy').click(function () {
                $progress_status = $('.progress-status');
                $this = $(this);
                $this.addClass('disabled');
                var task_id = $(this).data('id');
                var action = '';
                var detail = '';
                var timer;
                $('.result-failed').hide();
                $.post("{{ url("task/start-deploy") }}", {tid: task_id, _token: "{{ csrf_token() }}"}, function (o) {
                    action = o.code ? o.msg + ':' : '';
                    if (o.code != 0) {
                        clearInterval(timer);
                        $progress_status.removeClass('progress-bar-success').addClass('progress-bar-danger');
                        $('.error-msg').text(action + detail);
                        $('.result-failed').show();
                        $this.removeClass('disabled');
                    }
                }, "json");
                $progress_status.attr('aria-valuenow', 10).width('10%');
                function getProcess() {
                    $.get("{{ url("task/get-process") }}/" + task_id, function (o) {
                        data = o.data;
                        // 执行失败
                        if (0 == data.status) {
                            clearInterval(timer);
                            $('.step-' + data.step).removeClass('text-yellow').addClass('text-red');
                            $progress_status.removeClass('progress-bar-success').addClass('progress-bar-danger');
                            detail = o.msg + ':' + data.memo + '<br>' + data.command;
                            $('.error-msg').html(action + detail);
                            $('.result-failed').show();
                            $this.removeClass('disabled');
                            return;
                        } else {
                            $progress_status
                                .removeClass('progress-bar-danger progress-bar-striped')
                                .addClass('progress-bar-success')
                        }
                        if (0 != data.action) {
                            $progress_status.attr('aria-valuenow', data.action).width(data.action + '%');
                        }
                        if (100 == data.action) {
                            $progress_status.removeClass('progress-bar-striped').addClass('progress-bar-success');
                            $progress_status.parent().removeClass('progress-striped');
                            $('.result-success').show();
                            clearInterval(timer)
                        }
                        for (var i = 1; i <= data.step; i++) {
                            $('.step-' + i).removeClass('text-yellow text-red')
                                .addClass('text-green progress-bar-striped')
                        }
                    });
                }

                timer = setInterval(getProcess, 600);
            });
        })
    </script>
@endsection